<template>
	<view class="list-item" @click="detailClick(data)">
		<view class="item-warpper">
			<view class="item-image">
				<image :src="itemData.path"></image>
			</view>
			<view class="item-desc">
				<text class="title" v-text="itemData.disName"></text>
				<view class="flex-sal">
					<image class="icon" src="../../../static/images/discover/huo.png"></image>
					<text class="distance font-c-ad">{{itemData.distance}}</text>
				</view>
				<view class="item-map">
					<image src="../../../static/images/map.png"></image>
					<text class="font-12 font-c-ad">{{itemData.disDetails}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '../../common/js/util.js'
	export default {
		name: 'list-name',
		props: {
			data: Object,
			location: Object
		},
		computed: {
			itemData () {
				let data = this.data
				data.distance = util.getDistance(data.disLng, data.disLat, this.location.longitude, this.location.latitude)
				return data
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../common/scss/_common.scss";

	.list-item {
		border-radius: ws(5);
		background-color: #fff;
		box-shadow: $shaow-bottom;
		overflow: hidden;
		margin-bottom: ws(15);

		.item-warpper {
			display: flex;

			.item-image {
				width: ws(200);
				height: ws(170/2);
				margin-right: ws(5);
				background: #eee;

				>image {
					object-fit: cover;
					width: 100%;
					height: 100%;
				}
			}

			.item-desc {
				padding: 0 ws(10);
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				
				.flex-sal {
					display: flex;
					align-items: center;
					.icon{
						width: ws(15);
						height: ws(15);
						margin-right: ws(3);
					}
					.distance {
						font-size: ws(12);
						color: $main-color;
					}
				}
				
				.title {
					font-size: ws(28/2);
					line-height: ws(21);
					color: #414141;
					font-weight: bold;
					@include one-line;
				}

				.item-map {
					margin-left: ws(3);
					width: ws(215);
					@include one-line;

					image {
						width: ws(10);
						height: ws(12);
						vertical-align: middle;
						margin-right: ws(5);
					}
				}
			}
		}
	}
</style>
